<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>人事管理系统</title>

<link rel="stylesheet" href="../css/feather.css">
<link rel="stylesheet" href="../css/app-light.css">
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body class="vertical light">
<script src="../js/jquery.min.js" type="text/javascript"  charset="utf-8"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"  charset="utf-8"></script>
	<script src="../js/allset.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	loadmobanmemoyset();
	</script>	
	<main role="main" class="main-content">
		<div class="container-fluid">
			<div class="mybody">
			<div id="top">
				个人资料
			</div>
			<div id="face">
			 <div id="faceimage">
			 		<img id="mytx" />
			 </div>
			 <div id="loadimage">
			  <input type="file" id="file" name="myfile" style="display: none;" />
			  <button id="mysubmit" type="submit" style="display: none;"></button>
			 	<button type="button" id="loadfile" onclick="fileclick()">更改头像</button>
			 </div>
			</div>
			
			<div id="" >
				<div id="" class="group">
					<label for="in_name">昵称</label>
					<input id="in_name" name="username" onclick="inputclick('in_name')" onblur="clearinput()"/>
				</div>
				<div id=""  class="group">
					<label>性别</label>
					<button id="man"   onclick="sexclick('man')">男</button>
					<button id="women"  onclick="sexclick('women')">女</button>
				</div>
			</div>
			
			<div id="">
				<div id=""  class="group">
					<label for="hometown">现居地</label>
					<input id="hometown" name="hometown" onclick="inputclick('hometown')" onblur="clearinput()"/>
				</div>
			</div>
			
			
			
			<div >
				<button id="save" onclick="save()">保存</button>
			</div>
		</div>

		</div>
	</main> 
</div> 
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/index.js"     type="text/javascript" ></script>
<script type="text/javascript">
getimage();
$('#mysubmit').click(function () {
    // 1.先生成一个formdata对象
    let myFormData = new FormData();
    // 2.朝对象中添加普通的键值
    // 3.朝对象中添加文件数据
    // 1.先通过jquery查找到该标签
    // 2.将jquery对象转换成原生的js对象
    // 3.利用原生js对象的方法 直接获取文件内容
    myFormData.append('myfile',$('#file')[0].files[0]);
    $.ajax({
        url:'/roles/updateRolesImg',
        type:'post',
        data:myFormData,  // 直接丢对象
        // ajax传文件 一定要指定两个关键性的参数
        contentType:false,  // 不用任何编码 因为formdata对象自带编码 django能够识别该对象
        processData:false,  // 告诉浏览器不要处理我的数据 直接发就行
        success:function (data) {
            let img=document.getElementById('mytx');
            img.src=data;
           
        }
    })
})
</script>
</body>

</html>